<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>公募基金详情</title>
    <link rel="stylesheet" type="text/css" href="../../build/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="../../build/css/style.css">
    <script src="../../build/public/vue.js" charset="utf-8"></script>
    <script src="../../build/public/base.js" charset="utf-8"></script>
</head>
<body>
<div id="container" style="padding-bottom:50px;">
    <div class="detail-3-top">
        <p class="pro-name" v-if="!productInfo.name">--</p>
        <p class="pro-name" v-else>{{productInfo.name}}</p>
        <div class="pro-value">
            <span v-if="!proDetail.avgApr">--</span>
            <span v-else>{{proDetail.avgApr |formatNum('','%')}}</span>
            <i>七日年化收益率</i>
        </div>
        <div class="pro-public_cur" style="padding:10px 0;">
            <ul class="clear-fix">
                <li>
                    <p v-if="!proDetail.copiesBenefit">--</p>
                    <p v-else>{{ proDetail.copiesBenefit | percentAge }}</p>
                    <p>每万份收益</p>
                </li>
                <li>
                    <p v-if="productInfo.minimumInvestment == '0'">--</p>
                    <p v-else>{{productInfo.minimumInvestment |formatNum('','元')}}</p>
                    <p>起购金额</p>
                </li>
                <li>
                    <p v-if="!riskLevel">--</p>
                    <p v-else>{{ riskLevel }}级</p>
                    <p>基金等级</p>
                </li>
            </ul>
        </div>
    </div>
    <div class="public-chart">
        <ul class="chart-top-btn clear-fix">
            <li @click="historyData(1)" :class="{active:topTab}">七日年化收益率</li>
            <li @click="historyData(2)" :class="{active:!topTab}">每万份收益</li>
        </ul>
        <div id="lineChart"></div>
        <ul class="chart-bottom-btn clear-fix">
            <li
                    @click="netvalueTab('NUM_SEVENDAY')" :class="{active:netvalueday=='NUM_SEVENDAY'}">
                近7日
            </li>
            <li
                    @click="netvalueTab('NUM_ONEMONTH')" :class="{active:netvalueday=='NUM_ONEMONTH'}">
                近1个月
            </li>
            <li
                    @click="netvalueTab('NUM_THREEMONTH')" :class="{active:netvalueday=='NUM_THREEMONTH'}">
                近3个月
            </li>
            <li
                    @click="netvalueTab('')"
                    :class="{active:netvalueday==''}">
                成立以来
            </li>
        </ul>
    </div>
    <div class="detail-4-list">
        <dl>
            <dt>产品概述</dt>
            <dd>
                {{ productInfo.introduction  | formatEmpty }}
            </dd>
        </dl>
        <dl>
            <dt>
                <a v-bind:href="'product_3_profit.html?idStr='+proDetail.idStr">
                    收益
                </a>
                <span class="iconfont">&#xe61d;</span>
            </dt>
            <dd>
                <table>
                    <tr>
                        <td>日期</td>
                        <td>万份收益</td>
                        <td>七日年化</td>
                    </tr>
                    <tr class="emptyHandle">
                        <th class="aprDate">{{ pro_aprDate[0]  | formatTime }}</th>
                        <th class="copiesBenefit">{{ pro_copiesBenefit[0] | formatRadix}}</th>
                        <th class="avgApr">{{ pro_avgApr[0] | formatNum('','%') }} </th>
                    </tr>
                    <tr class="emptyHandle">
                        <th class="aprDate">{{ pro_aprDate[1] | formatTime }}</th>
                        <th class="copiesBenefit">{{ pro_copiesBenefit[1] | formatRadix}}</th>
                        <th class="avgApr">{{ pro_avgApr[1] | formatNum('','%') }} </th>
                    </tr>
                </table>
            </dd>
        </dl>

        <dl>
            <dt>分红</dt>
            <dd>
                <table>
                    <tr>
                        <td>日期</td>
                        <td>分红</td>
                    </tr>
                    <tr v-for="item in dividend">
                        <th>{{ item.dividendDate | formatEmpty }}</th>
                        <th>{{ item.amount | formatRadix }}</th>
                    </tr>
                </table>
            </dd>
        </dl>
        <dl class="split">
            <dt>拆分</dt>
            <dd>
                <table>
                    <tr>
                        <td>日期</td>
                        <td>拆分前净值</td>
                        <td>拆分后净值</td>
                        <td>拆分比例</td>
                    </tr>
                    <tr v-for="item in split">
                        <th>{{ item.splitDate | formatEmpty }}</th>
                        <th>{{ item.previousNetValue |  formatRadix }}</th>
                        <th>{{ item.followNetValue | formatRadix }}</th>
                        <th>{{ item.scale | formatEmpty }}</th>
                    </tr>
                </table>
            </dd>
        </dl>
        <dl>
            <dt>
                <a v-bind:href="'product_3_more.html?idStr='+ idStr">
                    基金详情
                    <span class="iconfont">&#xe61d;</span>
                </a>
            </dt>
        </dl>
    </div>
    <div class="btn-buttom" style="display: none;">
        <button type="button" class="contact" onclick="window.location.href='../mine/planner.html'">立即购买</button>
        <button type="button" class="purchase">分享</button>
    </div>
</div>
<script src="../../build/public/vue-resource.js" charset="utf-8"></script>
<script src="../../build/public/echarts.min.js" charset="utf-8"></script>
<script src="../../build/js/publicMoney.chart.option.js" charset="utf-8"></script>
<script src="../../build/js/config.js" charset="utf-8"></script>
<script src="../../build/js/common.js" charset="utf-8"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#container',
        data:{
            valueOne:['12','213','167','224'],                            //模拟数据
            valueTwo:['2017-5-14','2017-5-15','2017-5-16','2017-5-17'],   //模拟数据
            One:['200','113','167','124'],                                //模拟数据
            Two:['2017-5-14','2017-5-15','2017-5-16','2017-5-17'],        //模拟数据
            proDetail:'',
            productInfo:'',
            riskLevel:'',
            netvalueday:'NUM_SEVENDAY',                                   //初始请求数据字段
            topTab:true,
            chartIdStr:'',
            dateList:[],    // 日期
            valueList:[],   // 年化收益率
            copiesBenefitList:[],   // 万份收益
            idStr:'',
            profitList:[],
            pro_aprDate:[],
            pro_avgApr :[],
            pro_copiesBenefit :[],
            pro_idStr:'',
            dividend:[],
            split:[],

        },
        mounted:function(){
            this.$nextTick(function(){
                vm.idStr = this.getParameter('idStr');
                vm.getDetailData();
            })
        },
        methods:{
            getDetailData:function(callback){										//获取数据
                var url = "/product/publicFund/detail"            //公募基金详情
                get(url,{idStr:vm.idStr},function(res){
                    vm.proDetail = res.data;  //数据赋值
                    vm.productInfo = res.data.product;
                    vm.pro_idStr = res.data.idStr;
                    var riskLevel = res.data.product.riskLevel;
                    if(riskLevel == 'LOW'){
                        vm.riskLevel = 'R1';
                    }
                    if(riskLevel == 'MIDDLE'){
                        vm.riskLevel = 'R3';
                    }
                    if(riskLevel == 'HIGH'){
                        vm.riskLevel = 'R5';
                    }
                    vm.chartIdStr = res.data.idStr;
                    vm.publicFundChart();
                    vm.getProfitList();
                    vm.getDividend();
                    vm.getSpilit();
                })
            },
            publicFundChart:function(){
                var url = "/product/publicFund/monetaryFundAprById"    //根据期限获取获取年化收益率
                get(url,{
                    idStr:vm.chartIdStr,
                    aprTime:vm.netvalueday,
                },function(res){
                    vm.dateList = timeStampListConvert(res.data.dateList);     // 日期
                    vm.valueList = res.data.valueList;   // 年化收益率
                    vm.copiesBenefitList  = res.data.copiesBenefitList ;    // 万份收益
                    var viewDateList;
                    var viewValueList;
                    if(vm.dateList.length == 0){
                        viewDateList = new Array();
                        viewDateList.push(formatTime(new Date()));
                        viewValueList = new Array();
                        viewValueList.push(0);
                      //  console.log(viewDateList);
                      //  console.log(viewValueList);
                        vm.ininChart(viewValueList,viewDateList);
                    }
                    else{
                        vm.ininChart(vm.valueList,vm.dateList);         //传入数据，初始化图表
                    }
                   // vm.ininChart(vm.valueOne,vm.valueTwo);         //传入数据，初始化图表
                })
            },
            // 获取收益列表
            getProfitList:function (callback) {
                var url = "/product/publicFund/monetaryFundAprPage"            //公募基金详情
                get(url,{
                    currentPage:1,
                    publicFundId:vm.pro_idStr,
                    startDay:'',
                    endDay:'',
                },function (res) {
                    var date = document.getElementsByClassName('aprDate');
                    var copiesBenefit = document.getElementsByClassName('copiesBenefit');
                    var avgApr = document.getElementsByClassName('avgApr');
                  //  console.log('test'+vm.pro_copiesBenefit[0])
                    for(var i = 0; i<2; i++){
                        if(res.data.resultList[i].aprDate == undefined){
                            date[i].innerHTML = '--';
                        }
                        if(res.data.resultList[i].copiesBenefit == undefined){
                            copiesBenefit[i].innerHTML('--');
                        }
                        if(res.data.resultList[i].avgApr == undefined){
                            avgApr[i].innerHTML = '--';
                        }
                    }
                    vm.pro_aprDate.push(res.data.resultList[0].aprDate);
                    vm.pro_avgApr.push(res.data.resultList[0].avgApr);
                    vm.pro_copiesBenefit.push(res.data.resultList[0].copiesBenefit);

                    vm.pro_aprDate.push(res.data.resultList[1].aprDate);
                    vm.pro_avgApr.push(res.data.resultList[1].avgApr);
                    vm.pro_copiesBenefit.push(res.data.resultList[1].copiesBenefit);
                  //  console.log('万份'+ vm.pro_copiesBenefit);
                    //  vm.profitList = res.data.resultList;
                })
            },
            // 获取分红列表
            getDividend:function (callback) {
                var url = "/product/publicFund/fund-dividend/list"            //公募基金详情
                get(url,{
                    idStr:vm.chartIdStr,
                },function (res) {
                    vm.dividend = res.data;
                    if(res.data.length == 0){
                        vm.dividend = [{'dividendDate':'--','amount':'--'}];
                    }
                });
            },
            // 获取拆分列表
            getSpilit:function (callback) {
                var url = "/product/publicFund/fund-split/list"            //公募基金详情
                get(url,{
                    idStr:vm.chartIdStr,
                },function (res) {
                    vm.split = res.data;
                    if(res.data.length == 0){
                        vm.split = [{'splitDate':'--','previousNetValue':'--','followNetValue':'--','scale':'--'}];
                    }
                });
            },
            historyData:function(type){    //单位净值和历史收益率的切换
                switch(type){
                    case 1:
                        vm.topTab = true;
                        var viewDateList;
                        var viewValueList;
                        if(vm.dateList.length == 0){
                            viewDateList = new Array();
                            viewDateList.push(formatTime(new Date()));
                            viewValueList = new Array();
                            viewValueList.push(0);
                           // console.log(viewDateList);
                           // console.log(viewValueList);
                            vm.ininChart(viewValueList,viewDateList);
                        }
                        else{
                            vm.ininChart(vm.valueList,vm.dateList);        //传入数据，初始化图表
                        }
                        // vm.publicFundChart()
                        break
                    case 2:
                        vm.topTab = false;
                        var viewDateList;
                        var viewValueList;
                        if(vm.dateList.length == 0){
                            viewDateList = new Array();
                            viewDateList.push(formatTime(new Date()));
                            viewValueList = new Array();
                            viewValueList.push(0);
                           // console.log(viewDateList);
                           // console.log(viewValueList);
                            vm.ininChart(viewValueList,viewDateList);
                        }
                        else{
                            vm.ininChart(vm.copiesBenefitList,vm.dateList);        //传入数据，初始化图表
                        }
                       // vm.publicFundChart()
                        break
                }
            },
            netvalueTab:function(type){     //周期选择（初始为NUM_ONEMONTH，成立以来为空 ''）
                vm.netvalueday = type;
                vm.publicFundChart()
            },
            ininChart:function(one,two){    //传入数据，重置图表
                var indexChart = echarts.init(document.getElementById('lineChart'));
                indexChart.setOption(chartOption(one,two));
            },
            getParameter:function(name){    //获取链接中参数
                var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if(r!=null)return  unescape(r[2]); return null;
            },
        }
    })
</script>
</body>
</html>
